<template>
  <component
    :is="graph"
    ref="graph"
    :option="option"
    :config="config"
    :resize="resize"
    @variableChange="variableChange"
    @chartClick="chartClick"
  ></component>
</template>

<script>
import EChart from "./components/EChart";
import SunburstCustom from "./components/SunburstCustom.vue";
import Map from "./components/Map";
import TableList from "./components/TableList";
import TableSingle from "./components/TableSingle";
import KpiSingle from "./components/KpiSingle";
import DigitalFlop from "./components/DigitalFlop";
import ProcessTopology from "./components/ProcessTopology";
import AntvG2 from "./components/AntvG2";

export default {
  name: "graph",
  props: {
    graph: {
      type: String,
    },
    option: {
      type: Object,
    },
    config: {
      type: Object,
    },
    resize: [Number, String],
  },
  components: {
    EChart,
    SunburstCustom,
    Map,
    TableList,
    KpiSingle,
    DigitalFlop,
    ProcessTopology,
    TableSingle,
    AntvG2,
  },
  data() {
    return {};
  },
  methods: {
    getVariable() {
      let graph = this.$refs.graph;
      return graph.hasOwnProperty("getVariable")
        ? graph.getVariable(...arguments)
        : [];
    },
    variableChange(event) {
      this.$emit("variableChange", event);
    },
    chartClick(event) {
      this.$emit("chartClick", event);
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss"></style>
